<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px 0px 4px;
				background-color: #fafafa;
			}
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			.footer-center .input-sound {
				background-color: #eee;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #eaeaea;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			.msg-item .msg-content-wrapper{
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-content-wrapper .msg-sender{
				font-size: 12px;
				padding-left:8px;
			}
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content-wrapper {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			footer .mui-icon {
				color: #000;
			}
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/
				
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			#h {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				font-family: verdana !important;
				line-height: 18px !important;
				overflow: visible;
				position: absolute;
				left: -1000px;
				right: 0px;
				word-break: break-all;
				word-wrap: break-word;
			}
			.cancel {
				background-color: darkred;
			}
		</style>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">聊天</h1>
		</header>
		<pre id='h'></pre>
		<script id='msg-template' type="text/template">
			<% for(var i in record){ var item=record[i]; %>
				<div class="msg-item <%= (item.create_login_name==user.LOGIN_NAME?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
					<% if(item.create_login_name==user.LOGIN_NAME ) { %>
						<div class="msg-user">							
							<i class=" mui-icon mui-icon-person"></i>
						</div>
						
					<% } else { %>
						<i class="msg-user mui-icon mui-icon-person"></i>
					<% } %>
					<div class="msg-content-wrapper">
						<% if(item.create_login_name!=user.LOGIN_NAME ) { %>
							<div class="msg-sender"><%= item.NAME %></div>
						<% }%>
						<div class="msg-content">
							
							<div class="msg-content-inner">
							
								<%=( item.message|| '&nbsp;&nbsp;') %>
								
							</div>
							<div class="msg-content-arrow"></div>
						</div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
			<% } %>
		</script>
		<div class="mui-content">
			<div id='msg-list'>
			</div>
		</div>
		<footer>
			
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<i id='msg-type' class="mui-icon mui-icon-compose"></i>
			</label>
		</footer>
	
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.12.4.min.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function(mui, doc) {
			
				template.config('escape', false);
				//$.plusReady=function(fn){fn();};
				var appUser = app.getUserInfo();
				mui.plusReady(function() {
					 var self = plus.webview.currentWebview();
		
					 var  CASE_CODE = self.CASE_CODE;
					
					plus.webview.currentWebview().setStyle({
						softinputMode: "adjustResize"
					});
					var showKeyboard = function() {
						if ($.os.ios) {
							var webView = plus.webview.currentWebview().nativeInstanceObject();
							webView.plusCallMethod({
								"setKeyboardDisplayRequiresUserAction": false
							});
						} else {
							var Context = plus.android.importClass("android.content.Context");
							var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
							var main = plus.android.runtimeMainActivity();
							var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
							//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
							imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
							//alert("ll");
						}
					};
					var record = [];
					var ui = {
						body: doc.querySelector('body'),
						footer: doc.querySelector('footer'),
						footerRight: doc.querySelector('.footer-right'),
						btnMsgType: doc.querySelector('#msg-type'),
						boxMsgText: doc.querySelector('#msg-text'),
						
						areaMsgList: doc.querySelector('#msg-list'),
					
						h: doc.querySelector('#h'),
						content: doc.querySelector('.mui-content')
					};
					ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';
					//alert(ui.boxMsgText.offsetWidth );
					var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
				
			
					var bindMsgList = function(record) {
						//绑定数据:
						/*tp.bind({
							template: 'msg-template',
							element: 'msg-list',
							model: record
						});*/
						console.log(JSON.stringify(record));
						ui.areaMsgList.innerHTML += template('msg-template', {
							"record": record,
							"user"  : appUser
						});
						
						var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
						
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					};
					
					var initMsgList = function(){
						ui.areaMsgList.innerHTML = '';
						app.getCaseMsg(CASE_CODE,function(data){
							var msgList = data.RESULT_DATA;
							console.log(JSON.stringify(msgList));
							if(msgList){
								bindMsgList(msgList);
							}
						},function(){
							
						})
					}
					initMsgList();
					window.addEventListener('resize', function() {
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					}, false);
					var send = function(msg) {
						app.sendMsg(CASE_CODE,msg,function(data){
							var addList = [];
							addList.push({
								'create_login_name':appUser.LOGIN_NAME,
								'message':msg
								
							})
							bindMsgList(addList);
							
						},function(data){
							
						});
					};


					function msgTextFocus() {
							
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
						}
						//解决长按“发送”按钮，导致键盘关闭的问题；
					
					ui.footerRight.addEventListener('tap', function(event) {
						console.log('111111111');
						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							//showKeyboard();
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
							//							event.detail.gesture.preventDefault();
							var msgContent = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>');
							send(msgContent);
							ui.boxMsgText.value = '';
							mui.trigger(ui.boxMsgText, 'input', null);
						} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {
							ui.btnMsgType.classList.add('mui-icon-compose');
							ui.btnMsgType.classList.remove('mui-icon-mic');
							ui.boxMsgText.style.display = 'none';
							ui.boxMsgSound.style.display = 'block';
							ui.boxMsgText.blur();
							document.body.focus();
						} else if (ui.btnMsgType.classList.contains('mui-icon-compose')) {
							ui.btnMsgType.classList.add('mui-icon-mic');
							ui.btnMsgType.classList.remove('mui-icon-compose');
							ui.boxMsgSound.style.display = 'none';
							ui.boxMsgText.style.display = 'block';
							//--
							//showKeyboard();
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
						}
					}, false);
					
					
					
					ui.boxMsgText.addEventListener('input', function(event) {
						ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
						ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px';
						ui.content.style.paddingBottom = ui.footer.style.height;
					});
					var focus = false;
					ui.boxMsgText.addEventListener('tap', function(event) {
						console.log(ui.footerRight);
						ui.boxMsgText.focus();
						
						focus = true;
					}, false);
					//点击消息列表，关闭键盘
					ui.areaMsgList.addEventListener('click',function (event) {
						if(!focus){
							ui.boxMsgText.blur();
						}
					});
					var synTimer = setInterval(function(){
						console.log("message_timer running");
						app.getLastUnRead(CASE_CODE,function(data){
							var lastMsg = data.RESULT_DATA;
							if(lastMsg){
								var msgQueue = [];
								msgQueue.push(lastMsg);
								bindMsgList(msgQueue);
							}
						},function(data){
							
						});
					},1000);
					
					
					mui.back = function(event){
						if(synTimer){
							clearInterval(synTimer);
						}
						var current = plus.webview.currentWebview();
						current.close();
					}
					
					
					
					
				});
			}(mui, document));
		</script>
	</body>

</html>